<template>
	<view class="qx-pop" v-show="isVisible">
		<view class="modal-mask"></view>
		<view :class="{ active: isVisible }" class="modal-body">
			<view class="modal-wrapper-box">
				<view class="modal-hd">服务协议和隐私政策</view>
				<view class="modal-bd">
					请您务必审慎阅读，充分理解协议各条款，包括但不限于：为了向您提供即时通讯、内容分享等服务，我们需要收集您的设备信息，操作日志等个人信息，您可以在设置中查看、更改、注销个人信息并管理您的授权。
					<br>您可阅读<text style="color: #ba9d61" @click="open(0)">《用户协议》</text>和<text
						style="color: #ba9d61" @click="open(1)">《隐私协议》 </text>了解详细信息。点击同意开始接收我们的服务，点击不同意将退出。
				</view>
				<view class="modal-bd-flex" style="font-size: 35rpx;border-top: 2rpx solid #eaeaea;">
					<view style="text-align: center;width: 100%;border-bottom: 1rpx solid #eaeaea;" @click="not()">不同意
					</view>
					<view style="text-align: center;width: 100%;color: #004FBF;margin-top: 10rpx;" @click="agree()">同意</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" backgroundColor="#f0f0f0" type="center">
			<scroll-view scroll-y="true" style="height: 1000rpx;width: 750rpx;background-color: #f0f0f0;margin-top: 20rpx;margin-bottom: 10rpx;" scroll-with-animation="true">
				<ruleDisplay :htmlStr="roleInfo" @getClick="closePop"></ruleDisplay>
			</scroll-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE
	} from "../../util/network.js"
	export default {
		// mixins: [protocolMixin],
		props: ['obj', 'update'],
		data() {
			return {
				isVisible: false,
				roleInfo:'',
			};
		},
		methods: {
			closePop(){
				this.$refs.popup.close()
			},
			open(type){
				let _this = this
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/protocol/mobile-show`,
					data:{
						type:type
					},
					method:'GET',
					success: function (res) {
						console.log('协议',res)
						if(res.data.code == 200){
							_this.roleInfo = res.data.data.content
							uni.navigateTo({
								url:'../../pages/ruleDisplay/ruleDisplay?url=true' + '&htmlStr=' + encodeURIComponent(_this.roleInfo)
							})
						}
						if(res.data.code == 4000){
							uni.showModal({
								content:'后台管理暂未配置相关资源',
								showCancel:false
							});
						}
					}
				})
			},
			show(val) {
				this.isVisible = val;
			},
			agree() {
				uni.setStorageSync('first', true)
				this.show(false)
				// this.update()
			},
			not() {
				if (plus.os.name.toLowerCase() === 'android') {
					plus.runtime.quit();
				} else {
					const threadClass = plus.ios.importClass("NSThread");
					const mainThread = plus.ios.invoke(threadClass, "mainThread");
					plus.ios.invoke(mainThread, "exit");
					// ios11
					plus.ios.import("UIApplication").sharedApplication().performSelector("exit")
				}
			}
		}
	}
</script>

<style lang='scss'>
	.qx-pop {
		position: fixed;
		z-index: 1;
		transition: all 0.3s ease-in-out;
	}

	.modal-mask {
		z-index: 1;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.4);
	}

	.yesbut {
		background-color: #004FBF;
		color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		font-size: 30rpx;
		width: 440rpx;
		margin: 0 auto;
		padding: 16rpx 0;
	}

	.modal-body {
		z-index: 1;
		display: flex;
		opacity: 0;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;
		align-items: center;
		transition-timing-function: ease;
		transition-duration: 0.3s;
		transition-property: opacity;
	}

	.modal-body.active {
		z-index: 1;
		opacity: 1;
		height: 100vh;
	}

	.modal-wrapper-box {
		position: relative;
		z-index: 1;
		width: 80%;
		background-color: #ffffff;
		text-align: center;
		border-radius: 10rpx;

		.modal-hd,
		.modal-ft {
			padding: 36rpx 60rpx 12rpx;
			font-size: 36rpx;
		}

		.modal-hd {
			top: 250rpx;
			width: 600rpx;
			font-size: 32rpx;
			font-weight: 1000;
			color: #333333;
			text-align: center;
		}

		.modal-bd {
			z-index: 1;
			font-size: 28rpx;
			padding: 30rpx 60rpx;
			max-height: 50vh;
			overflow: scroll;
			text-align: left;
			line-height: 1.5;
		}
		.modal-bd-flex {
			flex:auto;
			z-index: 1;
			font-size: 28rpx;
			padding: 30rpx 60rpx;
			max-height: 50vh;
			overflow: scroll;
			text-align: left;
			line-height: 1.5;
		}
		.modal-ft {
			z-index: 1;
			padding-bottom: 36rpx;
			border-top: 1px solid #efefef;
		}
	}
</style>
